<!--  -->
<template>
  <div>
    <h1>人员列表</h1>
    <h2>人员列表中的第一个人员名字:{{addFirstPerson}}</h2>
    <input type="text"
           v-model="name"
           placeholder="请输入姓名">
    <button @click="personAdd">添加人员</button>
    <button @click="addPersonWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个远程服务器人员</button>
    <ul v-for="(item,index) in personList"
        :key="index">
      <li>id:{{item.id}}-----姓名:{{item.name}}</li>
    </ul>
    <h1 style="color:red">上面Counter组件里面的num总和为:{{sum}}</h1>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
import { mapState, mapMutations } from "vuex";
import axios from "axios";
export default {
  data () {
    return {
      name: "",
    }
  },
  computed: {
    personList () {
      return this.$store.state.personAbout.personList;
    },
    sum () {
      return this.$store.state.countAbout.sum;
    },
    addFirstPerson () {
      // 模块化里的getters里面的取值为：['命名空间/getters名字']
      return this.$store.getters['personAbout/addFirstPerson']
    }
    // 使用mapState函数
    // ...mapState({ personList: "personList", sum: "sum" })
    // ...mapState('personAbout', ['personList']),
    // ...mapState('countAbout', ['sum'])
  },
  methods: {
    personAdd () {
      const p = { id: nanoid(), name: this.name };
      // 注意这种写法
      this.$store.commit("personAbout/PERSONADD", p);
      // ...mapMutations("personAbout", ['PERSONADD']);
      //清空搜索框
      this.name = "";
    },
    addPersonWang () {
      const p = { id: nanoid(), name: this.name };
      this.$store.dispatch("personAbout/addPersonWang", p);
      this.name = "";
    },
    addPersonServer () {
      axios.get("https://api.uixsj.cn/hitokoto/get?type=social").then((res) => {
        const p = { id: nanoid(), name: res.data }
        this.$store.commit("personAbout/ADDPERSONSERVER", p)
      }).catch((err) => {
        console.log(err);
      })
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>